<template>
	<view class="addr">
		<view class="tit">
			智能识别地址
		</view>
		<view class="textarea">

			<AddressParse @addressConfirm="addressConfirm"></AddressParse>


			<!-- 	<u-input placeholder="粘贴地址信息，可自动识别并填写
如：圣小牧，186XXXXXXXX，北京市XX区XX街道XXXX" v-model="value" type="textarea" :border="false" height="199" :auto-height="true" /> -->
		</view>
		<view class="tit">
			收货信息
		</view>
		<view class="form">
			<u-form :model="model" :rules="rules" ref="uForm">
				<u-form-item :label-position="labelPosition" label="收货人" prop="realname" label-width="130">
					<u-input :border="border" placeholder="请填写收货人姓名" v-model="model.realname" type="text"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="手机号码" prop="tell" label-width="130">
					<u-input :border="border" maxlength="11" placeholder="请输入收货人手机号" v-model="model.tell" type="number"></u-input>
				</u-form-item>


				<u-form-item :label-position="labelPosition" label="所在地区" prop="region" label-width="130">
					<u-input :border="border" type="select" :select-open="pickerShow" v-model="model.region"
						placeholder="选择省/市/区" @click="pickerShow = true"></u-input>
					<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
				</u-form-item>

				<u-form-item :label-position="labelPosition" label="详细地址" label-width="130" prop="address">
					<u-input type="textarea" :border="border" placeholder="请填写详细地址" v-model="model.address" />
				</u-form-item>

			</u-form>
		</view>

		<view class="tags">
			<view class="tag">
				<view class="left">
					收货人
				</view>
				<view class="right">
					
					<view @click="chanmoren(index)" v-for="(item,index) in list1" class="itemtsg"
						:class="[cur==index?'active':'']">
						{{item}}
					</view>
				</view>
			</view>

			<view class="mor">
				<view class="left">
					设为默认收货地址
				</view>
				<view class="">
					<!-- {{model.checked}} -->
					<u-switch size="45" v-model="model.checked" active-color="#005850" inactive-color="#fff"></u-switch>
				</view>
			</view>
		</view>

		<u-button @click="submit" class="sub" type="primary" shape="circle" :ripple="true" ripple-bg-color="#909399">
			添加收货地址</u-button>
	</view>
</template>

<script>
	import AddressParse from '@/components/xghc-addrress/userAddress.vue'

	export default {
		components: {
			AddressParse
		},
		methods: {
			chanmoren(index){
				this.cur=index;
				this.model.label = this.list1[index];
			},
			addressConfirm(data) {
				this.model.realname = data?.real_name;
				this.model.tell = data?.phone
				this.model.region = data?.region
				this.model.address = data?.detail
				this.model.province = data?.province
				this.model.city = data?.city
				this.model.area = data?.area
			},
			regionConfirm(e) {
				this.model.province = e.province.label
				this.model.city = e.city.label
				this.model.area = e.area.label
				this.model.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let query = {...this.model};
						query.moren = query.checked?'是':'否'
						this.$u.api.saveOrUpdate(query)
							.then((res) => {
								console.log(res,4444);
								if(res.code==0){
									uni.navigateBack()
								}
							});
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
		},
		onLoad(e) {
			if(e?.id){
				this.model.id = e.id;
				this.$u.api.singleInfo({
					addressId:e.id
				})
					.then((res) => {
						this.model = res.info;
						// this.model.checked = res.info?.moren=='是'?true:false;
						this.model.region = this.model.province+'-'+this.model.city+'-'+this.model.area
						
						if(res.info?.moren=='是'){
							this.$set(this.model,'checked',true)
							
						}else{
							this.$set(this.model,'checked',false)
						}
						
						console.log(this.model.region,555);
						this.list1.map((r,index)=>{
							console.log(r,index,666777);
							if(r== res.info.label){
								this.cur = index;
							}
						})
					
						
					});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
			
				cur: undefined,
				list1: ['家', '公司', '学校'],
				border: false,
				labelPosition: 'left',
				pickerShow: false,
				value: '',
				model: {
					checked: false,
					realname: '',
					tell: '',
					province: '',
					city: '',
					area: '',
					address: '',
					region: '',
					id:"",
					label:'',
					// moren:'',
				},
				rules: {
					realname: [{
							required: true,
							message: '请填写收货人姓名',
							trigger: 'blur',
						},

					],
					address: [{
							required: true,
							message: '请填写详细地址',
							trigger: 'blur',
						},

					],
					tell: [{
							required: true,
							message: '请输入收货人手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '收货人手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],

					region: [{
						required: true,
						message: '选择省/市/区',
						trigger: 'change',
					}],



				},
			}
		}
	}
</script>
<style>
	page {
		background: #005850;
		padding: 48rpx 35rpx;
	}
</style>
<style scoped lang="scss">
	.mor {
		padding-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			margin-right: 27rpx;
			font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
			font-weight: normal;
			font-size: 26rpx;
			color: #005850;
			line-height: 35rpx;
		}
	}

	.tags {
		background: #FFFFFF;
		border-radius: 25rpx;
		margin: 35rpx 0;
		padding: 26rpx 35rpx;
	}

	.tag {
		padding: 0 0 26rpx;
		border-bottom: 1rpx solid rgba(151, 151, 151, 0.21);
		display: flex;
		align-items: center;

		.left {
			margin-right: 27rpx;
			font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
			font-weight: normal;
			font-size: 26rpx;
			color: #005850;
			line-height: 35rpx;
		}

		.right {
			display: flex;
			align-items: center;

			.itemtsg {
				padding: 5rpx 29rpx;
				font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
				font-weight: normal;
				font-size: 26rpx;
				color: #005850;
				line-height: 35rpx;
				margin-right: 20rpx;
				border-radius: 22rpx;
				border: 1rpx solid #005850;

				&.active {
					background: #005850;
					color: #fff;
				}
			}
		}
	}

	/deep/ .u-form-item--left__content__label[data-v-006449ec] {
		font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
		font-weight: normal;
		font-size: 26rpx;
		color: #024546;
		line-height: 35rpx;
	}

	.sub {
		margin: 42rpx 15rpx 0;
		height: 88rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 42rpx;
	}

	.form {
		background: #FFFFFF;
		border-radius: 25rpx;
		padding: 0rpx 35rpx 30rpx;
	}

	.textarea {
		margin-bottom: 34rpx;
		background: #FFFFFF;
		border-radius: 25rpx;
		padding: 25rpx 36rpx;
		font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
		font-weight: normal;
		font-size: 22rpx;
		color: #AAAAAA;
		line-height: 30rpx;
	}

	.addr {
		background: #F7F8F3;
		border-radius: 27rpx;
		padding: 46rpx 32rpx;

		.tit {
			font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
			font-weight: normal;
			font-size: 30rpx;
			color: #024546;
			line-height: 42rpx;
			padding-bottom: 20rpx;
		}

		.list {
			.item {
				padding: 30rpx 35rpx 0;

				background: #FFFFFF;
				border-radius: 25rpx;
				margin-bottom: 29rpx;
			}
		}
	}
</style>
